<template>
  <div class="edit-gallery">
    <div class="edit-gallery__topbar">
      <p class="edit-gallery__topbar--title">新建博客</p>
      <yk-space align="center">
        <yk-text type="secondary" v-show="nowMoment">{{ nowMoment }} 保存</yk-text>
        <yk-button type="secondary" @click="submit(0)">保存</yk-button>
        <yk-button @click="submit(1)">发布</yk-button>
      </yk-space>
    </div>
    <editorComponent style="width: 1200px;" @editors="editorData" :content="defaultArticle?.content">
      <formComponent :classify="0" @formData=formData style="width: 820px;" :form="defaultArticle?.formData">
      </formComponent>
    </editorComponent>
  </div>
</template>

<script setup lang="ts">
import editorComponent from '@/components/editor/editorComponent.vue';
import formComponent from '@/components/forms/formComponent.vue';
import { useArticle } from '@/hooks/article';
import { useRoute } from 'vue-router';
const route = useRoute();
const {
  formData,
  editorData,
  nowMoment,
  submit,
  id,
  defaultArticle
} = useArticle();


if (route.query.id) {
  id.value = Number(route.query.id);
}



</script>

<style lang="less" scoped>
.edit-gallery {
  padding: @space-xl 80px;
  display: flex;
  flex-direction: column;
  align-items: center; // 水平居中;

  &__topbar {
    border-radius: @radius-m;
    background: @bg-color-l;
    padding: @space-l @space-xl;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: @space-l;
    width: 1200px;

    &--title {
      .font-xl();
      font-weight: 600;
    }
  }

  .edit-form {
    background: @bg-color-l;
    border-radius: @radius-m;
    width: 100%;
    flex: none;
    display: flex;
    flex-direction: column;
    padding: 24px;
    align-items: center;
  }
}
</style>
